<template>
  <div class="app-main">
    <div class="search-box">
      <el-form :inline="true" size="mini" :model="listParams" ref="searchForm">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="供应商名称：" prop="name">
              <el-input v-model="listParams.name" placeholder="请输入供应商名称" clearable></el-input>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-button type="primary" size="mini" style="margin-bottom: 10px" @click="showAdd">添加供应商
      </el-button>
      <el-table :data="tableData" size="mini" border style="width: 100%" v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="供应商名称" width="400" align="center"></el-table-column>
        <el-table-column prop="pay_cycle_name" label="结算周期" width="200" align="center"></el-table-column>
        <el-table-column prop="delivery_method_name" label="送货方式" width="200" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" min-width="200" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="showMaterialshowMaterial(scope.row)">物料
            </el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)">删除</el-button>
            <!-- <el-button size="mini" @click="showGoods(scope.row.id)">查看货品信息</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page="listParams.page" :page-sizes="[10,20,50,100, 200,400]"
      layout="total, sizes, prev, pager, next, jumper" :page-size="listParams.page_size" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
    <!--录入供应商信息-->
    <el-dialog :title="is_edit?'编辑供应商信息':'新增供应商信息'" :visible.sync="supplierDialogVisible" width="60%" center
      @close="closeDialog">
      <el-form :model="supplierModel" class="" ref="supplierForm" v-loading="supplierDialogLoading"
        label-position="right" label-width="140px" :rules="supplierFromRules">
        <!-- <table class="mailTable">
          <tr class="firstTr">
            <td class="column firstTd">
              <span class="tip">*</span>名称
            </td>
            <td class="column">
              <el-form-item prop="name">
                <el-input v-model.trim="supplierModel.name" placeholder="请输入客户名称"></el-input>
              </el-form-item>
            </td>
            <td class="column">
              <span class="tip">*</span>结算周期
            </td>
            <td class="column">
              <el-form-item prop="pay_cycle">
                <el-input v-model.trim="supplierModel.pay_cycle" placeholder="请输入结算周期"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd title">
              <span class="tip">*</span>送货方式
            </td>
            <td>
              <el-form-item prop="delivery_method">
                <el-input v-model.trim="supplierModel.delivery_method" placeholder="请输入送货方式"></el-input>
              </el-form-item>
            </td>
            <td class="column firstTd title">
              <span class="tip">*</span>账户信息
            </td>
            <td>
              <el-form-item prop="account_info">
                <el-input v-model.trim="supplierModel.account_info" placeholder="请输入账户信息"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table> -->
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model.trim="supplierModel.name" placeholder="请输入供应商名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="business_license_list" class="own-form__pic">
          <upload-image :file-list-prop="picList" @upload-success="handleUploadSuccess"
            @upload-remove="handleUploadRemove" @upload-preview="handleUploadPreview"></upload-image>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model.trim="supplierModel.address" placeholder="请输入地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人信息" class="own-form-item__table">
          <el-row>
            <el-col :span="24" class="text-right">
              <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addRowByContact">新增
              </el-button>
            </el-col>
          </el-row>
          <el-table :data="supplierModel.contact_info_list" stripe border style="width: 100%;" max-height="380"
            size="mini">
            <el-table-column prop="contact_name" label="联系人">
              <template slot-scope="{row,$index}">
                <el-form-item prop="rulesByContactName" :rules="rulesByContactName(row.contact_name)">
                  <el-input size="mini" v-model="row.contact_name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="contact_mobile" label="电话">
              <template slot-scope="{row,$index}">
                <el-form-item prop="rulesByContactMobile" :rules="rulesByContactMobile(row.contact_mobile)">
                  <el-input size="mini" v-model="row.contact_mobile"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="{row,$index}">
                <el-button type="text" size="small" @click.native.prevent="delRowByContact($index)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结算周期" prop="pay_cycle_id">
              <el-select v-model="supplierModel.pay_cycle_id" filterable style="width: 100%" clearable
                placeholder="请选择结算周期">
                <el-option v-for="(item,index) in payCycleList" :key="index" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送货方式" prop="delivery_method_id">
              <el-select v-model="supplierModel.delivery_method_id" filterable style="width: 100%" clearable
                placeholder="请选择送货方式">
                <el-option v-for="(item,index) in deliveryMethodList" :key="index" :value="item.id"
                  :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="开票信息" prop="business_license_list" class="own-form-item__table">
          <el-row>
            <el-col :span="24" class="text-right">
              <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addRowByInvice">新增
              </el-button>
            </el-col>
          </el-row>
          <el-table :data="supplierModel.invoice_info_list" stripe border style="width: 100%;" max-height="380"
            size="mini">
            <el-table-column prop="company_name" label="抬头">
              <template slot-scope="{row,$index}">
                <el-form-item prop="rulesByCompanyName" :rules="rulesByCompanyName(row.company_name)">
                  <el-input size="mini" v-model="row.company_name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="bank_name" label="开户行">
              <template slot-scope="{row,$index}">
                <el-form-item prop="rulesByBankName" :rules="rulesByBankName(row.bank_name)">
                  <el-input size="mini" v-model="row.bank_name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="bank_account" label="账户">
              <template slot-scope="{row,$index}">
                <el-form-item prop="rulesByBankAccount" :rules="rulesByBankAccount(row.bank_account)">
                  <el-input size="mini" v-model="row.bank_account"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="{row,$index}">
                <el-button type="text" size="small" @click.native.prevent="delRowByInvice($index)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="supplierDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保&nbsp;存</el-button>
      </span>
    </el-dialog>
    <!-- 录入物料信息 -->
    <el-dialog title="编辑物料信息" :visible.sync="materialDialogVisible" width="60%" center @close="closeMaterialDialog">
      <el-form :model="materialModel" class="own-form-item__table" ref="materialForm" v-loading="supplierDialogLoading"
        label-position="right">
        <el-row>
          <el-col :span="24" class="text-right margin-bottom-sm">
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addRowByMaterial">新增
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="materialModel.material_list" stripe border style="width: 100%;" max-height="380" size="mini">
          <el-table-column prop="material_texture_id" label="物料">
            <template slot-scope="{row,$index}">
              <el-form-item prop="rulesByMaterialTexture" :rules="rulesByMaterialTexture(row.material_texture_id)">
                <el-select size="mini" v-model="row.material_texture_id" filterable style="width: 100%" clearable
                  placeholder="请选择材质" @change="((val)=>{changeMaterial(val, $index)})" @clear="clearMaterial($index)">
                  <el-option v-for="(item,index) in materialTextureList" :key="index" :value="item.id"
                    :label="item.name" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="price" label="单价(/平米)">
            <template slot-scope="{row,$index}">
              <el-form-item prop="rulesByMaterialPrice" :rules="rulesByMaterialPrice(row.price)">
                <el-input size="mini" v-model="row.price"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="{row,$index}">
              <el-button type="text" size="small" @click.native.prevent="delRowByMaterial($index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="materialDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfoByMaterial()">保&nbsp;存</el-button>
      </span>
    </el-dialog>

    <el-image-viewer v-if="imgDialogVisible" :on-close="closeViewer" :url-list="imageSrcList"
      :initial-index="imageSrcIndex" :z-index="3000" />
    <!--供应商货品信息表格-->
    <!-- <el-dialog :title="'货品信息'" :visible.sync="goodsTableDialogVisible" width="60%" center @close="closeDialog">
      <div class="search-box">
        <el-form :inline="true" :model="goodsListParams" ref="goodsSearchForm">
          <search-form-box :show-more-btn="false">
            <template slot="showSearch">
              <el-form-item label="货品名称：" prop="name">
                <el-input v-model="goodsListParams.name" placeholder="请输入货品名称" clearable></el-input>
              </el-form-item>
            </template>
            <template slot="searchBtn">
              <el-form-item>
                <el-button type="primary" @click="goodsSearch">查询</el-button>
                <el-button @click="resetForm('goodsSearchForm')">重置</el-button>
              </el-form-item>
            </template>
          </search-form-box>
        </el-form>
      </div>
      <div class="table-box">
        <el-button size="mini" type="primary" @click="showGoodsAdd">新增货品信息</el-button>
        <el-table :data="goodsTableData" border style="width: 100%;margin-top: 20px" v-loading="goodsTableLoading">
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ (goodsListParams.page - 1) * goodsListParams.page_size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="货品名称" width="300" align="center"></el-table-column>
          <el-table-column prop="material" label="材质" width="100" align="center"></el-table-column>
          <el-table-column prop="size" label="尺寸" width="100" align="center"></el-table-column>
          <el-table-column label="单价" min-width="100" align="center">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="制作时长" min-width="200" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.production_time }}天</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="goodsEdit(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :current-page="goodsListParams.page" :page-sizes="[10,20,50,100, 200,400]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-size="goodsListParams.page_size" :total="goodsTotal"
                     @size-change="goodsHandleSizeChange"
                     @current-change="goodsHandleCurrentChange"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goodsTableDialogVisible = false">取 消</el-button>
      </span> -->
    <!--录入供应商货品信息-->
    <!-- <el-dialog :title="is_edit?'编辑货品信息':'新增货品信息'" :visible.sync="goodFormDialogVisible" width="58%" center
                 @close="goodFormCloseDialog"
                 append-to-body top="200px"
      >
        <el-form ref="goodForm" :model="good" class="dialogForm" :rules="goodFromRules">
          <table class="mailTable">
            <tr class="firstTr">
              <td class="column firstTd">
                <span class="tip">*</span>名称
              </td>
              <td class="column">
                <el-form-item prop="name">
                  <el-input v-model.trim="good.name" placeholder="请输入货品名称"></el-input>
                </el-form-item>
              </td>
              <td class="column">
                <span class="tip">*</span>材质
              </td>
              <td class="column">
                <el-form-item prop="material">
                  <el-input v-model.trim="good.material" placeholder="请输入材质"></el-input>
                </el-form-item>
              </td>
              <td class="column">
                <span class="tip">*</span>尺寸
              </td>
              <td>
                <el-form-item prop="size">
                  <el-input v-model.trim="good.size" placeholder="请输入尺寸"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr class="firstTr">
              <td class="column firstTd">
                <span class="tip">*</span>单价
              </td>
              <td colspan="2">
                <el-form-item prop="price">
                  <el-input v-model.trim="good.price" placeholder="请输入单价"></el-input>
                </el-form-item>
              </td>
              <td class="column firstTd">
                <span class="tip">*</span>制作时长
              </td>
              <td colspan="2">
                <el-form-item prop="account_info">
                  <el-input v-model.trim="good.production_time" placeholder="请输入制作时长">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="goodFormDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveGoodInfo()">保 存</el-button>
        </span>
      </el-dialog>
    </el-dialog> -->
  </div>
</template>
<script>
  import SearchFormBox from '@/components/SearchFormBox'
  import UploadImage from '@/components/upload'
  import {
    list,
    detail,
    detail_material,
    add,
    edit,
    remove,
    save_material
  } from '@/api/supplier/supplier'
  import { list_all3rd_bycode } from '@/api/business/setting/dict'
  import {
    validMobileAndTel
  } from '@/utils/validate'
  import {
    cloneDeep
  } from 'lodash'
  import {
    Message
  } from 'element-ui';
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

  export default {
    name: 'SupplierList',
    components: {
      SearchFormBox,
      UploadImage,
      ElImageViewer
    },
    data() {
      var validateMobile = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入联系电话"));
        } else if (!validMobileAndTel(value)) {
          callback(new Error("请输入正确的联系电话（手机号或者固话）"));
        } else {
          callback();
        }
      };

      return {
        listParams: {
          name: null,
          page: 1,
          page_size: 10
        },
        tableData: [],
        tableLoading: false,
        total: null,
        supplierDialogVisible: false,
        supplierDialogLoading: false,
        supplierModel: {
          id: null,
          name: null,
          pay_cycle_id: null,
          delivery_method_id: null,
          address: null,
          business_license_list: [],
          contact_info_list: [],
          invoice_info_list: []
        },
        supplierFromRules: {
          name: [{
              required: true,
              message: '请输入供应商名称',
              trigger: 'blur'
            },
            {
              max: 50,
              message: '最多允许输入50个字符串',
              trigger: 'blur'
            }
          ],
          address: [{
            max: 250,
            message: '最多允许输入250个字符串',
            trigger: 'blur'
          }]
        },
        rulesByContactName: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入联系人')) //验证不通过
              else if (data.length > 50) callback(new Error('最多允许输入50个字符串'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        rulesByContactMobile: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入联系电话')) //验证不通过
              else if (!validMobileAndTel(data)) callback(new Error('请输入手机号或者固话'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        rulesByCompanyName: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入抬头')) //验证不通过
              else if (data.length > 50) callback(new Error('最多允许输入50个字符串'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        rulesByBankName: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入开户行')) //验证不通过
              else if (data.length > 50) callback(new Error('最多允许输入50个字符串'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        rulesByBankAccount: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入账户')) //验证不通过
              else if (data.length > 50) callback(new Error('最多允许输入50个字符串'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        picList: [],
        payCycleList: [],
        deliveryMethodList: [],
        //物料
        materialDialogVisible: false,
        materialModel: {
          supplier_id: null,
          material_list: []
        },
        materialTextureChecked: {},
        rulesByMaterialTexture: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请选择材质')) //验证不通过
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },
        rulesByMaterialPrice: (data) => {
          return [{
            validator: (rule, value, callback) => {
              if (!data) callback(new Error('请输入单价')) //验证不通过
              else if (!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/.test(data)) callback(new Error(
                '请输入合法数字(支持2位小数)'))
              callback(); //验证通过
            },
            trigger: 'blur'
          }]
        },

        goodFormDialogVisible: false,
        good: {
          supplier_id: null,
          name: null,
          material: null,
          size: null,
          price: null,
          production_time: null
        },
        goodFromRules: {},
        goodsListParams: {
          name: null,
          page: 1,
          page_size: 10
        },
        goodsTotal: null,
        goodsTableLoading: false,
        goodsTableData: [{
          id: 1,
          supplier_id: 1,
          name: '智能电梯框',
          material: '铁',
          size: '100*200',
          price: 2378.1,
          production_time: '2'
        }],
        goodsTableDialogVisible: false,
        is_edit: false,
        //图片预览
        imgDialogVisible: false,
        imageSrcList: [],
        imageSrcIndex: 0 //预览显示图片索引
      }
    },
    created() {
      this.getDictPayCycle()
      this.getDictDeliveryMethod()
      this.getDictMaterialTexture()
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        this.listParams.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listParams.page = val
        this.getList()
      },
      goodsHandleSizeChange(val) {
        this.goodsListParams.page_size = val
        this.getGoodsList()
      },
      goodsHandleCurrentChange(val) {
        this.goodsListParams.page = val
        this.getGoodsList()
      },
      getDictPayCycle() {
        list_all3rd_bycode({ code: 'gysxg-jszq' }).then(res => {
          this.payCycleList = res.data
        })
      },
      getDictDeliveryMethod() {
        list_all3rd_bycode({ code: 'gysxg-shfs' }).then(res => {
          this.deliveryMethodList = res.data
        })
      },
      getDictMaterialTexture() {
        list_all3rd_bycode({ code: 'dwxg-hmsx' }).then(res => {
          this.materialTextureList = res.data
        })
      },
      getList() {
        this.tableLoading = true
        list(this.listParams).then(res => {
          const {
            code,
            data,
            message
          } = res
          if (code == 200) {
            this.tableData = data.records
            this.total = data.total
          }
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      getGoodsList() {
        this.goodsTableLoading = true
        setTimeout(
          () => {
            this.goodsTableLoading = false
          }, 1000
        )
        this.goodsTotal = this.goodsTableData.length
      },
      search() {
        this.getList()
      },
      edit(row) {
        this.supplierDialogVisible = true
        this.supplierDialogLoading = true
        detail({
          id: row
        }).then(res => {
          const {
            code,
            data,
            message
          } = res
          if (code === 200) {
            var list = data.business_license_list,
              imgList = []
            for (var i in list) {
              imgList.push(list[i].url)
            }
            this.supplierModel = Object.assign({}, data)
            this.picList = list
            this.imageSrcList = imgList
            this.is_edit = true
            this.$nextTick(() => {
              this.$refs['supplierForm'].clearValidate()
              this.supplierDialogLoading = false
            })
          }
        }).catch(() => {
          this.supplierDialogLoading = false
        })
      },
      goodsEdit(row) {
        this.good = Object.assign({}, row)
        this.goodFormDialogVisible = true
        this.is_edit = true
        this.$nextTick(() => {
          this.$refs['goodForm'].clearValidate()
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.getList()
      },
      goodsSearch() {
        this.getGoodsList()
      },
      showAdd() {
        this.supplierDialogVisible = true
        this.supplierDialogLoading = false
        this.$nextTick(() => {
          this.$refs['supplierForm'].clearValidate()
        })
      },
      saveInfo() {
        if (this.supplierDialogLoading) return false
        this.$refs['supplierForm'].validate((valid) => {
          if (valid) {
            console.log('校验通过', this.supplierModel)
            this.supplierDialogLoading = true
            if (this.is_edit) {
              edit(this.supplierModel).then(
                res => {
                  const {
                    code,
                    message
                  } = res
                  if (code === 200) {
                    Message({
                      message,
                      type: 'success',
                      duration: 1000
                    })
                    this.getList()
                    this.supplierDialogVisible = false
                  }
                  this.supplierDialogLoading = false
                }
              ).catch(() => {
                this.supplierDialogLoading = false
              })
            } else {
              add(this.supplierModel).then(
                res => {
                  const {
                    code,
                    message
                  } = res
                  if (code === 200) {
                    Message({
                      message,
                      type: 'success',
                      duration: 1000
                    })
                    this.getList()
                    this.supplierDialogVisible = false
                  }
                  this.supplierDialogLoading = false
                }
              ).catch(() => {
                this.supplierDialogLoading = false
              })
            }
          }
        })
      },
      closeDialog() {
        this.supplierModel = {
          id: null,
          name: null,
          pay_cycle_id: null,
          delivery_method_id: null,
          address: null,
          business_license_list: [],
          contact_info_list: [],
          invoice_info_list: []
        }
        this.is_edit = false
        this.picList = []
      },
      showGoodsAdd() {
        this.goodFormDialogVisible = true
        this.$nextTick(() => {
          this.$refs['goodForm'].clearValidate()
        })
      },
      showGoods() {
        this.goodsTableDialogVisible = true
        this.getGoodsList()
      },
      saveGoodInfo() {
        this.goodsTableData.push(this.good)
        this.goodFormDialogVisible = false
      },
      goodFormCloseDialog() {
        this.good = {
          supplier_id: null,
          name: null,
          material: null,
          size: null,
          price: null,
          production_time: null
        }
        this.is_edit = false
      },
      remove(id) {
        if (this.supplierDialogLoading) return false
        this.$confirm('确认要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          this.supplierDialogLoading = true
          remove({
            id: id
          }).then(res => {
            const {
              code,
              message
            } = res
            if (code === 200) {
              Message({
                message,
                type: 'success',
                duration: 1000
              })
              this.getList()
            }
            this.supplierDialogLoading = false
          })
        })
      },
      //营业执照上传
      handleUploadSuccess(data) {
        console.log('handleUploadSuccess', data)
        this.commUploadPic(data)
      },
      //营业执照移除
      handleUploadRemove(data) {
        console.log('handleUploadRemove', data)
        this.commUploadPic(data)
      },
      //营业执照预览
      handleUploadPreview(data) {
        console.log('handleUploadPreview', data)
        var imageSrcIndex = 0,
          url = data.id ? data.url : (data.response && data.response.data || data),
          list = this.imageSrcList
        for (var i in list) {
          var o = list[i]
          if (o == url) imageSrcIndex = +i
        }
        console.log(imageSrcIndex)
        this.imageSrcIndex = imageSrcIndex
        this.imgDialogVisible = true
      },
      closeViewer() {
        this.imgDialogVisible = false
      },
      commUploadPic(data) {
        var list = [],
          imgList = []
        for (var i in data) {
          var o = data[i]
          if (o.id) {
            list.push(o)
            imgList.push(o.url)
          } else {
            var url = o.response && o.response.data || o
            list.push({
              type: 1,
              url: url
            })
            imgList.push(url)
          }
        }
        this.supplierModel.business_license_list = list
        this.imageSrcList = imgList
      },
      //新增联系人row
      addRowByContact() {
        this.supplierModel.contact_info_list.unshift({
          contact_name: '',
          contact_mobile: ''
        })
      },
      //移除联系人row
      delRowByContact(index) {
        this.$refs['supplierForm'].clearValidate()
        this.supplierModel.contact_info_list.splice(index, 1)
      },
      //新增开票row
      addRowByInvice() {
        this.supplierModel.invoice_info_list.unshift({
          company_name: '',
          bank_name: '',
          bank_account: ''
        })
      },
      //移除开票row
      delRowByInvice(index) {
        this.$refs['supplierForm'].clearValidate()
        this.supplierModel.invoice_info_list.splice(index, 1)
      },
      //显示物料弹出框
      showMaterialshowMaterial(row) {
        var supplier_id = row.id
        this.materialDialogVisible = true
        this.supplierDialogLoading = true
        detail_material({
          id: supplier_id
        }).then(res => {
          const {
            code,
            data,
            message
          } = res
          if (code === 200) {
            this.commMaterialChecked(data)
            this.materialModel = Object.assign({}, {
              material_list: data,
              supplier_id: supplier_id
            })
            this.$nextTick(() => {
              this.$refs['materialForm'].clearValidate()
              this.supplierDialogLoading = false
            })
          }
        }).catch(() => {
          this.supplierDialogLoading = false
        })
      },
      closeMaterialDialog() {
        this.materialModel = {
          supplier_id: null,
          material_list: []
        }
      },
      // 材质改变事件
      changeMaterial(e, idx) {
        const list = this.materialModel.material_list
        if (list.length > 1) {
          if (this.materialTextureChecked[e]) {
            this.materialModel.material_list[idx].material_texture_id = null
            this.$message.error('已存在该材质，请重新选择')
          }
        }
        this.$nextTick(() => {
          this.commMaterialChecked(list)
        })
      },
      // 材质清除事件
      clearMaterial(idx) {
        const list = this.materialModel.material_list
        this.commMaterialChecked(list)
      },
      commMaterialChecked(list) {
        console.log(list)
        var obj = {}
        // 处理已选择材质
        for (var i in list) {
          var o = list[i],
            material_texture_id = o.material_texture_id
          if (material_texture_id) obj[material_texture_id] = material_texture_id
        }
        console.log(obj)
        this.materialTextureChecked = obj
      },
      saveInfoByMaterial() {
        if (this.supplierDialogLoading) return false
        this.$refs['materialForm'].validate((valid) => {
          if (valid) {
            console.log('校验通过', this.materialModel)
            this.supplierDialogLoading = true
            save_material(this.materialModel).then(
              res => {
                const {
                  code,
                  message
                } = res
                if (code === 200) {
                  Message({
                    message,
                    type: 'success',
                    duration: 1000
                  })
                  this.getList()
                  this.materialDialogVisible = false
                }
                this.supplierDialogLoading = false
              }
            ).catch(() => {
              this.supplierDialogLoading = false
            })
          }
        })
      },
      addRowByMaterial() {
        this.materialModel.material_list.unshift({
          id: null,
          supplier_id: this.materialModel.supplier_id,
          material_texture_id: null,
          price: null
        })
      },
      delRowByMaterial(index) {
        const material_texture_id = this.materialModel.material_list[index].material_texture_id
        this.$refs['materialForm'].clearValidate()
        this.materialModel.material_list.splice(index, 1)
        delete this.materialTextureChecked[material_texture_id]
      }
    }
  }
</script>

<style scoped>
  .app-main {
    padding: 0 20px;
  }

  .search-box {
    margin-top: 10px;
  }

  .table-box {
    margin-bottom: 20px;
  }

  .mailTable {
    width: 90%;
    font-size: 14px;
    margin: 0 auto 10px auto;
    border-collapse: collapse;
  }

  .mailTable tr td {
    width: 200px;
    height: 60px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #E6EAEE;
    border-right: 1px solid #E6EAEE;
  }

  .firstTr td {
    border-top: 1px solid #E6EAEE;
  }

  .firstTd {
    border-left: 1px solid #E6EAEE;
  }

  .mailTable tr td.column {
    text-align: center;
  }

  .tip {
    color: red;
  }

  /deep/ .dialogForm .el-form-item {
    margin-bottom: 0;
  }

  /deep/ .own-form__pic .el-form-item__content {
    line-height: 20px !important;
  }

  .own-form__pic .upload-demo {
    width: 100%;
    margin: 0;
  }

  /deep/ .el-dialog .own-form-item__table .el-form-item__content {
    line-height: 20px !important;
  }

  /deep/ .el-dialog .own-form-item__table .el-form-item {
    margin-bottom: 15px !important;
  }
</style>
